<template>
  <el-dialog :model-value="DialogDetails" width="55%" :before-close="handleClose">
    <h3>活动详情</h3>
    <el-divider />
    <div v-loading="loading" element-loading-text="Loading...">
      <el-descriptions :column=2 size="large">
        <el-descriptions-item label="活动名称：">{{ descriptionsData.title }}</el-descriptions-item>
        <el-descriptions-item label="活动时间：">{{ descriptionsData.durationStartTime }} - {{
          descriptionsData.durationEndTime }}</el-descriptions-item>
        <el-descriptions-item label="活动地点：">{{ descriptionsData.destName }}</el-descriptions-item>
        <el-descriptions-item label="活动类型：">{{ descriptionsData.typeName }}</el-descriptions-item>
        <el-descriptions-item label="活动标签：">
          <el-tag size="small" v-for="(item, index) in descriptionsData.tags" :key="index" style="margin-right: 5px;">{{
            item }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="联系方式：">{{ descriptionsData.contact }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions :column=1 size="large">
        <el-descriptions-item label="票种设置：">
        </el-descriptions-item>
      </el-descriptions>
      <el-table :data="ticketsData" border size="small" fit stripe show-header empty-text="暂无数据" max-height="300px"
        style="width: 100%;margin-bottom: 5px;" :header-cell-style="{ background: '#e7e1fb' }">
        <el-table-column prop="ticketName" label="票种名称" />
        <el-table-column prop="name" label="票种类型" v-slot="scope">
          {{ scope.row.price > 0 ? '收费票' : '免费票' }}
        </el-table-column>
        <el-table-column prop="price" label="价格" />
        <el-table-column prop="quantity" label="数量" />
        <el-table-column prop="singleNum" label="人数" />
        <el-table-column prop="bookStartTime" label="售票开始时间" />
        <el-table-column prop="bookEndTime" label="售票结束时间" />
        <el-table-column prop="validStartTime" label="有效开始时间" />
        <el-table-column prop="validEndTime" label="有效结束时间" />
        <el-table-column prop="description" label="票种说明" />
        <el-table-column prop="isOnSale" label="开售中" v-slot="scope">
          {{ scope.row.isOnSale === 0 ? '否' : '是' }}
        </el-table-column>

      </el-table>

      <el-descriptions :column=2 size="large">
        <el-descriptions-item label="活动名片：">

        </el-descriptions-item>
        <el-descriptions-item label="活动最低成行人数：">
          {{ descriptionsData.minNumOfPeople + '人' }}
        </el-descriptions-item>
        <el-descriptions-item label="授权场地方核销本活动：">
          {{ descriptionsData.isWrittenOff === 0 ? '否' : '是' }}
        </el-descriptions-item>
        <el-descriptions-item label="报名进行人工审核：">
          {{ descriptionsData.isManualReviewed === 0 ? '否' : '是' }}
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions :column=1 size="large">
        <el-descriptions-item label="公开度：" :column=1>
          {{ descriptionsData.openness === 0 ? '所有人不可见' : '所有人可见' }}
        </el-descriptions-item>
        <el-descriptions-item label="活动图片：">
          <br>
          <el-image v-for="(item, index) in descriptionsData.imgUrls" :key="index"
            style="width: 120px; height: 120px; margin: 10px 5px 0 0;" :src="item" fit="fill" />
        </el-descriptions-item>
        <el-descriptions-item label="活动内容：">
          <br>
          {{ descriptionsData.introduce }}
        </el-descriptions-item>

        <el-descriptions-item label="参与者加入活动后,需要展示的信息：">
          <br>
          {{ descriptionsData.showToParticipants }}
        </el-descriptions-item>
        <el-descriptions-item label="报名须知：">
          <br>
          {{ descriptionsData.participateInNotice }}
        </el-descriptions-item>
        <el-descriptions-item label="退款须知：">
          <br>
          {{ descriptionsData.refundNotice }}
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">关闭</el-button>
        <el-button type="primary" plain @click="refuse">
          拒绝
        </el-button>
        <el-button type="primary" @click="carry">
          通过
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { DetailsActivityList } from "@/api/PlatformReview/ActivityReview";
import { onMounted, onUpdated, ref } from "vue"
const descriptionsData = ref({})
const loading = ref(true)
const ticketsData = ref([])

const emit = defineEmits(['carry', 'cancel', 'refuse']);

const props = defineProps({
  DialogDetails: {
    type: Boolean
  },
  DetailsId: {
    type: String
  }
})
const DetailsHandle = async () => {
  loading.value = true
  const res = await DetailsActivityList(
    props.DetailsId
  )
  if (res.data.code === 200) {
    descriptionsData.value = res.data.data
    ticketsData.value = res.data.data.tickets
    loading.value = false

  }
}



const handleCancel = () => {
  emit('cancel')
}
const refuse = () => {
  emit('refuse')
}
const carry = () => {
  emit('carry')
}
const handleClose = () => {
  handleCancel()
}
onMounted(() => {

})
onUpdated(() => {
  DetailsHandle()
})
</script>

<style lang="scss" scoped>
:deep(.el-descriptions__label) {
  color: #afb1b3;
}
</style>
